<template>
  <div>
    <!-- 因为只有表单有disabled属性，所以需要父组件传递给子组件CategorySelector中的表单，通过props -->
    <CategorySelector :disabled="!isShowAttrList" />
    <!-- 在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数） -->
    <!-- <AttrList v-show="flag" @setShowAttrList="isShowAttrList($event)" />
    <AddOrUpdateAttrVue v-show="!flag" /> -->

    <!-- AttrList组件没有获取最新的数据展示，再次添加属性的话，会重复添加之前的属性 -->
    <!-- <AttrList
      v-show="isShowAttrList"
      @setShowAttrList="isShowAttrList = $event"
    />
    <AddOrUpdateAttrVue
      v-show="!isShowAttrList"
      @setShowAttrList="isShowAttrList = $event"
    /> -->

    <!-- 使用v-if 但是此时AttrList没有获取最新的数据展示, 需要开启立即监视 -->
    <AttrList
      v-if="isShowAttrList"
      @setShowAttrList="isShowAttrList = $event"
    />
    <AddOrUpdateAttrVue v-else @setShowAttrList="isShowAttrList = $event" />
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
import AttrList from "./components/AttrList.vue";
import AddOrUpdateAttrVue from "./components/AddOrUpdateAttr.vue";
export default {
  name: "XAttr",
  components: {
    CategorySelector,
    AttrList,
    AddOrUpdateAttrVue,
  },
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
// let flag = ref(true);
// const isShowAttrList = (e: boolean) => {
//   flag.value = e;
// };

const isShowAttrList = ref(true);
</script>

<style scoped></style>
